<template>
  <div class="page-trade buy">
    <div class="page-trade-top">
      <div class="page-trade-title">基本信息</div>
      <ul>
        <li>
          <div><i class="icon maliiconfont maliicon-img_details_custodia"></i> 回购方</div>
          <p>{{tradeData.sellerName}}</p>
        </li>
        <li >
          <div><i class="icon maliiconfont maliicon-img_detailse_refund"></i> 交易对象</div>
          <p>{{tradeData.buyerName}}</p>
        </li>
        <li>
          <div><i class="icon maliiconfont maliicon-storehouse"></i> 保管人</div>
          <p>{{tradeData.storageCompanyName}}</p>
        </li>
        <li>
          <div><i class="icon maliiconfont maliicon-img_details_allocati"></i> 保管仓</div>
          <p>{{tradeData.storageName}}</p>
        </li>
        <li >
          <div><i class="icon maliiconfont maliicon-img_details_figure"></i> 申请人</div>
          <p>{{tradeData.creator}}</p>
        </li>
        <li>
          <div><i class="icon maliiconfont maliicon-img_details_calendar"></i> 申请时间</div>
          <p>{{tradeData.createdTime}}</p>
        </li>
        <li >
          <div><i class="icon maliiconfont maliicon-img_details_sell"></i> 出售申请编号</div>
          <p>{{tradeData.sellArNo}}</p>
        </li>
      </ul>
    </div>
    <div class="page-trade-box">
      <div class="trade-box-title">交易信息</div>
      <div class="trade-box-title-des" v-if="tradeData.repurchaseDate" >
        <span v-if="tradeData.repurchaseDate">回购日期：{{tradeData.repurchaseDate }}</span>
      </div>
      <egrid class="egrid-class" border
             show-summary
             sum-text="合计"
             :summary-method="getSummaries"
             :data="wmsArDetailGoodsVoList"
             :columns="goodsColumns"
             propSpan="wrId"
             :columns-schema="columnsSchema"
             :columns-props="columnsProps">
      </egrid>
    </div>
    <div class="page-trade-audit-box" v-if="!!tradeData.applyDesc">
      <span class="title-trade">审核说明：</span>
      <span class="con-trade">{{tradeData.applyDesc}}</span>
    </div>
    <div class="trade-btn-group" v-if="tradeData.pageType === 0">
      <el-button v-permission="['wms:trade:buyback:confirm:pass']" class="singleBtnClass" @click="confirmTrade(1)" type="primary">同意</el-button>
      <el-button v-permission="['wms:trade:buyback:confirm:refuse']" class="singleBtnClass" @click="confirmTrade(2)" type="primary" plain>不同意</el-button>
    </div>
    <pc-dialog :is-show="isBillDetail"  title ='仓单详情' @on-close="isBillDetail = false">
      <div >
        <bill-detail :id="wrId"></bill-detail>
      </div>
    </pc-dialog>
  </div>
</template>
<script>
  import PcDialog from 'components/dialog';
  import BillDetail from 'src/views/wms/dataquery/billlist/billManagement/billDetail';
  // 页面展示 信息  根据Id获取约定回购详情   GET /ar/getArDetailByArId
  let that;
  // 操作按钮
  var Btn = {
    template: `<div style="text-align: center">
        <el-button type="primary" plain @click="viewdetail(row)">查看</el-button>
      </div>`,
    props: ['row'],
    computed: {},
    methods: {
      // 查看仓单详情
      viewdetail(val) {
        this.$emit('view-detail', val);
      }
    }
  };
  export default {
    props: ['tradeData'],
    components: {
      PcDialog, BillDetail
    },
    created () {
      that = this;
    },
    computed: {
      wmsArDetailGoodsVoList () {
        if (this.tradeData.wmsArDetailGoodsVoList) {
          for (var i = 0; i < this.tradeData.wmsArDetailGoodsVoList.length; i++) {
            if (this.tradeData.wmsArDetailGoodsVoList[i].scanWeight === null) {
              this.tradeData.wmsArDetailGoodsVoList[i].scanWeight = '-';
            }
          }
        }
        return this.tradeData.wmsArDetailGoodsVoList;
      },
      // 货物信息数据列
      goodsColumns() {
        if (this.isInArray([6, 8], this.tradeData.arStatus)) {
          this.baseColumns.splice(10, 2);
        }
        return this.baseColumns;
      }
    },
    watch: {},
    data () {
      return {
        isBillDetail: false,
        spanArr: [],
        position: 0,
        storageId: null,
        baseColumns: [
          {
            label: '仓单业务号',
            prop: 'busNo'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '柜号',
            prop: 'cntrNo'
          },
          {
            label: '生产厂家',
            prop: 'vendor'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '包装',
            prop: 'packageDesc'
          },
          {
            label: '生产日期',
            prop: 'productDate'
          },
          {
            label: '出售数量',
            prop: 'sellNum'
          },
          {
            label: '回购数量',
            prop: 'repurchaseNum'
          },
          {
            label: '参考回购重量(kg)',
            prop: 'refTotalWeight'
          },
          {
            label: '抄码重量(kg)',
            prop: 'scanWeight'
          },
          {
            label: '交易金额(元)',
            prop: 'transactionAmount'
          },
          {
            label: '对应仓单',
            prop: 'wrId',
            merge: true
          }
        ],
        columnsSchema: {
          '对应仓单': {
            label: '对应仓单',
            width: 116,
            merge: true,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'view-detail' (data) {
                that.wrId = data.wrId; // 仓单ID
                that.isBillDetail = true;
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        },
        columnsProps: {
          height: 40,
          minWidth: 150,
          align: 'center',
          showOverflowTooltip: true
        },
        wrId: null // 仓单ID
      };
    },
    methods: {
      toDetail (index, row) {
        this.storageId = row.wrId;
        this.isBillDetail = true;
      },
      isInArray (arr, value) {
        for (var i = 0; i < arr.length; i++) {
          if (value === arr[i]) {
            return true;
          }
        }
        return false;
      },
      // 计算合计值的函数
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          };
          let emptyArr = [1, 2, 3, 4, 5, 6, 12];
          if (this.isInArray([6, 8], this.tradeData.arStatus)) {
            emptyArr = [1, 2, 3, 4, 5, 6, 10];
          }
          if (this.isInArray(emptyArr, index)) {
            sums[index] = '';
            return;
          }
          // 将表格中的每行数字数据相加
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // 对小数保留两位有效数字，四舍五入
            sums[index] = Number(sums[index].toFixed(2));
          } else {
          }
        });
        return sums;
      },
      confirmTrade (type) {
        let confirmMsg = '';
        let confirmMsgArr = ['确定同意吗？', '确定不同意吗？'];
        if (type === 1) {
          confirmMsg = confirmMsgArr[0];
        } else {
          confirmMsg = confirmMsgArr[1];
        }
        let params = {};
        params.confirmType = type;
        params.id = this.tradeData.id;
        params.version = this.tradeData.version;
        this.confirmModel(confirmMsg, '/maliwms/ar/confirmAr', params, (res) => {
          if (res.code === 200) {
            this.successTip('提交成功', 3000);
            this.$emit('closeRefresh', 'page-tradeBuy');
          }
        });
      }
    }
  };
</script>
<style>
  .page-trade .page-trade-top{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .page-trade .page-trade-top .page-trade-title{
    height: 50px;
    line-height:50px;
    color:#333333;
    text-indent: 20px;
    border:1px solid #e3e4e6;
    font-size:16px;
    background-color:#fff;
  }
  .page-trade .page-trade-top ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .page-trade .page-trade-top ul li{
    width: 33.33%;
    height: 100px;
    padding-left: 20px;
    vertical-align: middle;
    display: inline-block;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: white;
  }
  .page-trade .page-trade-top ul li>div{
    color:#808080;
    font-size:14px;
    padding-top:20px;
  }
  .page-trade .page-trade-top .maliiconfont{
    color: #ff6c2b;
    font-size:16px;
  }
  .page-trade .page-trade-top ul li p{
    color:#333333;
    font-size:14px;
    margin-top:16px;
    margin-bottom:10px;
  }
  .page-trade .page-trade-box .trade-box-title{
    height: 50px;
    line-height:50px;
    color:#333333;
    text-indent: 20px;
    border:1px solid #e3e4e6;
    font-size:16px;
    background: #fff;
    margin-top:20px;
  }
  .page-trade.buy .page-trade-box .trade-box-title{
    margin-bottom:-1px;
  }
  .page-trade .page-trade-box .trade-box-title-des{
    height: 50px;
    line-height:50px;
    color:#333333;
    text-indent: 20px;
    border:1px solid #e3e4e6;
    font-size:16px;
    background: #fff;
    border-top:none;
    margin-top:1px;
  }
  .page-trade .page-trade-box .trade-box-title-des span{
    margin-right:30px;
  }
  .page-trade .page-trade-audit-box{
    background: #fff;
    min-height: 54px;
    box-sizing: border-box;
    padding-top: 18px;
    padding-left: 18px;
    padding-bottom: 8px;
    font-size:14px;
    color:#333;
    border:1px solid #e3e4e6;
    margin-top:30px;
  }
  .page-trade .page-trade-audit-box span{
    display: inline-block;
  }
  .page-trade .page-trade-audit-box span.title{
    width:70px;
    vertical-align: top;
  }
  .page-trade .page-trade-audit-box span.con{
    width:845px;
  }
  .page-trade .trade-btn-group{
    text-align: center;
    margin-top:40px;
  }
  .page-trade .trade-btn-group .trade-btn-agree{
    min-width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    margin: 0 5px;
    background-color: #1383f2;
    border-radius: 2px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    border: none;
  }
  .page-trade .trade-btn-group .trade-btn-pass{
    min-width: 140px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border: 1px solid #1383f2;
    border-radius: 2px;
    color: #1383f2;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
  }


  .page-trade .page-trade-top ul{
    position:relative;
    border-left:1px solid #e3e4e6;
  }
  .page-trade .page-trade-top ul li{
    height:96px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;

  }
  .page-trade.buy .page-trade-audit-box span.title-trade{
    width:70px;
    display:inline-block;
  }
  .page-trade.buy .page-trade-audit-box span.con-trade{
    width:853px;
    vertical-align: top;
    display: inline-block;
  }
</style>
